<template>
	<view class="member">
		<view class="member-top">
			<image class="member-top-img" src="../../../static/会员背.png" mode=""></image>
			<view class="member-top-right">
				<text>开通记录</text>
				<image src="../../../static/箭头@1x.png" mode="" style="width: 28rpx; height: 28rpx;"></image>
			</view>
			<text class="member-top-text1">升级会员享受更多权益</text>
			<text class="member-top-text2">为专业律师提供的会员服务</text>
			<image class="member-top-img1" src="../../../static/更多服务.png" mode=""></image>
		</view>
		<view class="member-content">
			<view style="height: 30rpx;"></view>
			<text>律师基础服务</text>
			<view class="nav">
				<view class="big-view">
					<view>
						<view class="mfzx">
							<image src="../../../static/健康咨询@1x.png" mode=""></image>
						</view>
						<p class="navtext1">免费咨询</p>
						<p class="navtext2">每日两次免费问</p>
					</view>
				</view>
			</view>
			<shisan myprops="开通会员可升级服务" mycolor="#F7EFE4"></shisan>
			<view class="member-content-btn" @click="kaitong">
				<text>立即开通</text>
				<text>￥{{price}}元/年</text>
			</view>
			<image src="../../../static/会员说明 1、开通会员后，律师可解锁服务 2@1x.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import { getVipPrice, vipPay } from '../../../utils/utils';
	export default {
		data() {
			return {
				price: ''
			};
		},
		onLoad() {
			getVipPrice((e) => {
				console.log('会员价格',e);
				this.price = e.data.price
			})
		},
		methods: {
			// 开通会员
			kaitong () {
				vipPay((e) => {
					console.log(e);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		width: 100%;
		height: 100%;
	}
	.member-top {
		width: 750rpx;
		height: 260rpx;
	}
	.member-top-img {
		width: 750rpx;
		height: 312rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	.member-top-right {
		width: 132rpx;
		height: 30rpx;
		font-size: 26rpx;
		line-height: 30rpx;
		text-align: right;
		color: rgba(255, 255, 255, 0.6);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 24rpx;
		right: 22rpx;
	}
	.member-top-text1 {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 50rpx;
		color: #FFFFFF;
	}
	.member-top-text2 {
		display: block;
		font-size: 22rpx;
		font-weight: 500;
		line-height: 26rpx;
		text-align: center;
		margin-top: 40rpx;
		color: rgba(255, 255, 255, 0.9);
	}
	.member-top-img1 {
		display: block;
		width: 436rpx;
		height: 52rpx;
		margin: 20rpx auto 0;
	}
	
	.member-content {
		width: 750rpx;
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
		background-color: white;
		position: relative;
		top: -20rpx;
		left: 0;
	}
	.member-content > text {
		display: block;
		width: 168rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		margin: 30rpx 0 0 24rpx;
	}
	
	.member-content-btn {
		width: 616rpx;
		height: 88rpx;
		background: url("../../../static/黑btn.png") no-repeat center center / 100% 100%;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: 500;
	}
	.member-content-btn > text:nth-child(2) {
		font-size: 24rpx;
	}
	
	.member-content > image {
		width: 420rpx;
		height: 100rpx;
		display: block;
		margin: 56rpx 0 0 28rpx;
	}
	
	.nav {
		width: 750rpx;
		height: 150rpx;
		opacity: 1;
		background: #FFFFFF;
		margin-top: 10rpx;
	}
	.nav > .big-view {
		width: 666rpx;
		height: 150rpx;
		margin-left: 42rpx;
		display: flex;
		justify-content: space-between;
	}
	.big-view > view {
		width: 144rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}
	.mfzx {
		width: 144rpx;
		height: 92rpx;
		background: linear-gradient(90deg, #00C393 0%, #00B98A 100%);
		border-radius: 46rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mfzx > image {
		width: 56rpx;
		height: 56rpx;
	}
	.navtext1 {
		width: 112rpx;
		height: 32rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		text-align: center;
	}
	.navtext2 {
		width: 158rpx;
		height: 26rpx;
		opacity: 1;
		font-family: HarmonyOS Sans SC;
		font-size: 22rpx;
		font-weight: normal;
		line-height: 26rpx;
		letter-spacing: 0rpx;
		color: #A9A9A9;
		text-align: center;
	}
</style>
